<template>
  <div>
    <h2>用户界面</h2>
    <p>我是用户界面,用户</p>
    <p>{{userId}}</p>
    <p>{{$route.params.userId}}</p>
    <!-- $route.params.userId 获取传参的userId参数 -->
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
  export default {
    name: "User",
    computed: {
      userId() {
        // $route 指当前活跃的路由即当前跳转的路由
        return this.$route.params.userId // userId是配置路由的参数 path: "/user/:userId",
      }
    },
    methods: {
      btnClick() {
        // vue所有方法都是从vue原型上继承的
        console.log(this.$router);
        console.log(this.$route);
        console.log(this.test);
      }
    },
    created() {
      console.log("user created");
    },
    destroyed() {
      console.log("user destroyed");
    },
  }
</script>

<style scoped>

</style>
